<template>
  <div class="container">
    <uv-navbar placeholder>
      <template v-slot:left>
        <view class="uv-nav-slot" :style="{ 'padding-right': counter.menuButtonInfoWidth+'px' }">
          <uv-search placeholder="请输入搜索内容" disabled :showAction="false"></uv-search>
        </view>
      </template>
    </uv-navbar>

    <view class="wrap grids gridColumns5">
      <view class="item" v-for="(item,index) in info.menus" :key="index" @click="proxy.$utils.toLink(`${item.url}?name=${item.name}`)">
        <view class="pic">
          <image :src="item.pic" mode="aspectFill" />
        </view>
        <view class="fz12 textCenter">{{item.name}}</view>
      </view>
    </view>

    <view class="aWrap" v-if="info.banner">
      <uv-swiper circular v-if="info.banner.length>=3" :list="info.banner" previousMargin="30" nextMargin="30" keyName="pic" height="200" indicator indicatorMode="line"></uv-swiper>
      <uv-swiper circular v-else :list="info.banner" keyName="pic" height="200" indicator indicatorMode="line"></uv-swiper>
    </view>

    <!-- 优惠券 -->
    <view class="couponIndex" v-if="couponList.length">
      <view class="acea-row flex flexWrap alignCenter" style="padding: 10px 0 0 20px">
        <view class="titBox">
          <view class="tit1">领取优惠券</view>
          <view class="tit2">福利大礼包，省了又省</view>
          <navigator class='item' url='/pages/users/user_get_coupon/index' hover-class='none'>
            <view class="tit3">查看全部 <text class="iconfont icon-xiangyou"></text></view>
          </navigator>
        </view>
        <view class="listBox acea-row flex flexWrap">
          <view class="list" :class='item.isUse ? "listHui" : "listActive" ' v-for="(item, index) in couponList.slice(0,2)" :key="index">
            <view class="tit line1" :class='item.isUse ? "pricehui" : "titActive" '>{{item.name}}
            </view>
            <view class="price" :class='item.isUse ? "pricehui" : "icon-color" '>
              {{item.money?Number(item.money):''}}<text class="yuan">元</text></view>
            <view class="ling" v-if="!item.isUse" :class='item.isUse ? "pricehui" : "icon-color" ' @click="getCoupon(item.id,index)">领取</view>
            <view class="ling" v-else :class='item.isUse ? "pricehui fonthui" : "icon-color" '>已领取
            </view>
            <view class="priceM">满{{item.minPrice?Number(item.minPrice):''}}元可用</view>
          </view>
        </view>

      </view>
    </view>

    <view class="explosiveMoney aWrap" :style="explosiveMoneyStyle">
      <view class="item textCenter" @click="explosiveMoneyClick(index)" :class="{ active: index == current }" v-for="(item,index) in info.explosiveMoney" :key="index">
        <view class="fz12">{{item.name}}</view>
        <view class="fz10 desc">{{item.info}}</view>
      </view>
    </view>

    <view class="shopList flex justifyBetween flexWrap">
      <view class="box" v-for="(item,index) in shops" :key="index" @click="proxy.$utils.toLink(`/packagePages/shoppingMall/details?id=${item.id}`)">
        <view class="img">
          <image :src="item.image" mode="aspectFill" />
        </view>
        <view class="info">
          <view class="title fz14">{{item.storeName}}</view>
          <view class="oldPrice fz12">¥{{item.otPrice}}</view>
          <view class="newPrice fz14 bold">¥{{item.price}}</view>
        </view>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let info = ref({});
let current = ref(0);
let params = {
  page: 1,
  limit: 10,
};
let totalPages = 0;
let shops = ref([]);
let couponList = ref([]);

onLoad(() => {
  init();
});

onShow(() => {
  uni.showTabBar();
});

onReachBottom(() => {
  getMore();
});

function getMore() {
  if (params.page >= totalPages) return;
  params.page++;
  getProduct();
}

function explosiveMoneyClick(index) {
  current.value = index;
  shops.value = [];
  params.page = 1;
  getProduct();
}

let explosiveMoneyStyle = computed(() => {
  if (!info.value.explosiveMoney) return;
  if (info.value.explosiveMoney.length <= 5) {
    return {
      display: "grid",
      gridTemplateColumns: `repeat(${info.value.explosiveMoney.length}, minmax(0px, 1fr))`,
      gap: "0 12px", //上下间距 左右间距
    };
  } else {
  }
});

async function init() {
  info.value = await proxy.$shopApis.frontIndex();
  console.log("首页信息", info.value);
  getProduct();
  getCoupons();
}

async function getCoupons() {
  couponList.value = await proxy.$shopApis.getCoupons({
    page: 1,
    limit: 6,
  });
  console.log("优惠券信息", couponList.value);
}

async function getProduct() {
  let { list, totalPage } = await proxy.$shopApis.product(
    info.value.explosiveMoney[current.value].type,
    params
  );
  totalPages = totalPage;
  if (list && list.length) shops.value.push(...list);
  console.log("商品信息", shops.value);
}
</script>


<style lang="scss">
page {
  background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
.aWrap {
  margin: 15px;
}
.explosiveMoney {
  .active {
    color: #ea3323;
    .desc {
      color: #fff;
      background: linear-gradient(to right, #f62f2c, #f7682a);
      border-radius: 6px;
    }
  }
  .desc {
    color: #999;
  }
}

.wrap {
  width: calc(100% - 50px);
  margin: 15px auto;
  gap: 12px 12px; //上下间距 左右间距
  background: #fff;
  border-radius: 5px;
  padding: 10px;
  .item {
    .pic {
      width: 100%;
      height: 0;
      padding-top: 100%;
      position: relative;
      margin: 0 auto 3px;
      image {
        display: block;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }
    }
  }
}
.shopList {
  width: calc(100% - 30px);
  margin: auto;
  .box {
    width: calc((100% - 15px) / 2);
    margin-bottom: 15px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
    .img {
      width: 100%;
      height: 0;
      padding-top: 100%;
      position: relative;
      image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
    .info {
      padding: 5px;
      .title {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .oldPrice {
        text-decoration: line-through;
        color: #999;
      }
      .newPrice {
        color: #cd4c3d;
      }
    }
  }
}

.couponIndex {
  width: calc(100% - 30px);
  background-image: url("https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/09/02/17252581122923171.png");
  background-size: 100% 100%;
  margin: 0 auto 15px;
  .titBox {
    text-align: center;
    height: 100%;

    .tit1 {
      color: #ffebd2;
      font-size: 34rpx;
      font-weight: 600;
    }

    .tit2 {
      color: #ffebd2;
      font-size: 22rpx;
      margin: 10rpx 0 26rpx 0;
    }

    .tit3 {
      color: #ffdaaf;
      font-size: 24rpx;

      .iconfont {
        font-size: 20rpx;
      }
    }
  }

  .listBox {
    padding: 14rpx 0;

    .listActive {
      background-image: url("https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/09/02/1725258177825426.png");
      background-size: 100% 100%;
    }

    .listHui {
      background-image: url("https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/09/02/17252582210382631.png");
      background-size: 100% 100%;
    }

    .list {
      width: 170rpx;
      padding: 16rpx 0;
      text-align: center;
      margin-left: 24rpx;

      .tit {
        font-size: 18rpx;
        padding: 0 26rpx;
      }

      .titActive {
        color: #c99959;
      }

      .price {
        font-size: 46rpx;
        font-weight: 900;
        margin-top: 4rpx;
      }

      .pricehui {
        color: #b2b2b2;
      }

      .fonthui {
        background-color: #f5f5f5 !important;
      }

      .yuan {
        font-size: 24rpx;
      }

      .ling {
        font-size: 24rpx;
        margin-top: 9.5rpx;
        width: 102rpx;
        height: 36rpx;
        line-height: 36rpx;
        background-color: #ffe5c7;
        border-radius: 28rpx;
        margin: auto;
      }

      .priceM {
        color: #ffdaaf;
        font-size: 22rpx;
        margin-top: 14rpx;
      }
    }
  }
}
</style>
